<template>
  <div>
    <el-card shadow="never">
      <el-alert title="发布商品请确定商品能够正常发货" type="info"></el-alert>
      <p>商品配图</p>
      <el-form ref="form" :model="form" label-width="80px">
      <input type="file"  id="fileInput">

      
      <!-- <el-upload class="pd" action="#" list-type="picture-card" :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="yespics(file)">
              使用
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>  -->
      <p></p>

        <el-form-item label="商品名">
          <el-input v-model="form.goods_name"></el-input>
        </el-form-item>

        <!-- <el-form-item label="类型">
          <el-select v-model="form.goods_cat" placeholder="请选择类型">
            <el-option label="家电" value="家电"></el-option>
            <el-option label="数码" value="数码"></el-option>
            <el-option label="家具" value="家具"></el-option>
            <el-option label="藏品" value="藏品"></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="新旧程度">
          <el-select v-model="form.goods_stu" placeholder="请选择新旧程度">
            <el-option label="全新" value="100"></el-option>
            <el-option label="99新（几乎全新）" value="99"></el-option>
            <el-option label="89新（略有磨损）" value="89"></el-option>
            <el-option label="79新（多处轻微磨损）" value="79"></el-option>
            <el-option label="59新（磨损磕碰）" value="59"></el-option>
            <el-option label="坏的" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="讨价还价">
          <el-switch v-model="form.is_promote"></el-switch>
        </el-form-item>

        <el-form-item
          label="定价"
          prop="goods_price"
          :rules="[    { required: true, message: '定价不能为空'}
    ]"
        >
          <el-input v-model="form.goods_price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="拥有数量"
          prop="goods_number"
          :rules="[
      { required: true, message: '数量不能为空'}
    ]"
        >
          <el-input v-model.number="form.goods_number" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="form.goods_introduce"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发布</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "WorkspaceJsonReleaseViwe",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      form: {
        goods_name: "", //名字
        goods_price: 0, // 价格
        goods_introduce: "", // 描述
        goods_cat: "",
        //类型
        goods_stu: "",
        // 磨损程度
        is_promote: false,
        goods_big_logo:''
        //是否促销
        // pics: ""
        // 图
      },
    };
  },

  mounted() {},

  methods: {
    async onSubmit() {
      let fileinput = document.querySelector("fileInput");
      
      
      const file = fileInput.files[0];
      if (!file) {
        alert('请选择一个文件');
        return;
      }
      console.log(fileInput.files)
      const formData = new FormData();
      formData.append('file', file);	
      
      let upload = await this.$http.post("upload", formData)
      console.log(upload)
      if(upload.meta.status != 200){
        this.$message.error("选择的文件错误");
        return false;
      }
      this.form.goods_big_logo = upload.data.url

      // 先做文件上传，如果没有问题，那么拿到url给数据库
      let res = await this.$http.post("goods", this.form);
      if (res.meta.status == 201) {
        this.$message.success("发布成功");
        this.$router.push("/tg");
      } else {
        this.$message.error("发布失败你看看你写的什么");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.pd {
  padding: 11px 3px 7px 83px;
}
</style>